<template>
    <h2>用户显示</h2>
    <table>
        <thead>
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="i in data" :key="i.Uid">
                <td>{{ i.Uname }}</td>
                <td>{{ i.Password }}</td>
                <td>{{ i.State == 0 ? "启用" : "禁用" }}</td>
                <td>
                    <input type="button" value="删除" @click="shan(i.Uid)" />
                </td>
            </tr>
        </tbody>
    </table>
    共<span style="color:red">{{ page.listcount }}</span>条数据
    每页显示<span style="color:red">{{ page.pagesize }}</span>条数据
    当前第<span style="color:red">{{ page.pageindex }}/{{ page.pagecount }}</span>页

    <a href="#" @click="pages(1)">首页</a>
    <a href="#" @click="pages(page.pageindex - 1)">上一页</a>
    <a href="#" @click="pages(page.pageindex + 1)">下一页</a>
    <a href="#" @click="pages(page.pagecount)">尾页</a>

</template>

<script setup lang="ts">
//分页
const page = ref({
    pageindex: 1,//当前页
    pagecount: 0,//每页显示条数
    pagesize: 3,//每页显示条数
    listcount: 0,//总页数
})
const pages = (i: number) => {
    if (i >= 1 && i <= page.value.pagecount) {
        page.value.pageindex = i;
        show();
    }
}

import { onMounted, ref } from 'vue'

import axios from 'axios'
const data: any = ref([])
onMounted(() => {
    show();
})
const show = () => {
    axios.get("http://localhost:50394/api/Role/AdminShow", {
        params: {
            pageindex: page.value.pageindex,
            pagesize: page.value.pagesize,
        }
    })
        .then(res => {
            console.log(res.data)
            data.value = res.data.pageshow
            page.value.pagecount = res.data.pagecount,
                page.value.listcount = res.data.listcount
        })
        .catch(err => {
            console.log(err)
        })
}
//删除
const shan = (Uid: number) => {
    if (confirm("确定删除吗？")) {
        axios.get("http://localhost:50394/api/Role/Luoji", {
            params: {
                id: Uid
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert("删除成功");
                    show();
                }
                else {
                    alert("删除失败");
                    return;
                }
            })
            .catch(err => {
                console.log(err);
            })
    }

}
</script>